<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      placeholder="请输入物业名称"
      :pageInfo="pager"
      :listData="tableData"
      :selectData="selectDataArr"
      operaColumnWidth="120"
      searchName="keyword"
      :menuList="menuList"
      :filterList="filterList"
      :dataInfo="dataInfo"
      :operaInfo="operaInfo"
      openSelection
      @menu-click="handleMenuClick"
      @btn-click="handleBtnClick"
      @selection-change="$event => (selectDataArr = $event)"
    />
    <paymentDialog ref="dialog" />
  </basic-container>
</template>

<script>
import { getPaymentList, deletePaymentList } from '@/views/wy-operate/api/payment'
import paymentDialog from './paymentDialog'
export default {
  components: {
    paymentDialog
  },
  provide () {
    return {
      initList: this.queryData,
    };
  },
  beforeMount () {
    this.queryData();
  },
  data () {
    return {
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        keyword: ''
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      // 筛选项
      filterList: [
        { label: '合同签订日期', inputType: 'daterange', name: ['signingDateStart', 'signingDateEnd'] },
        { label: '付款日期', inputType: 'daterange', name: ['paymentDateStart', 'paymentDateEnd'] },
        { label: '付款项目', inputType: 'dict', dictName: 'payment-contract-type', name: 'paymentProjectList', multiple: true },
        { label: '合同类型', inputType: 'dict', dictName: 'payment-contract-type', name: 'contractTypeList', multiple: true },
      ],
    }
  },
  computed: {
    // 表格展示数据
    dataInfo () {
      return [
        { label: "合同编号", width: "150", prop: "contractNo", 'show-overflow-tooltip': true },
        { label: "物业名称", prop: "propertyName", width: "200", 'show-overflow-tooltip': true },
        { label: "乙方单位名称", width: "200", prop: "unitName", 'show-overflow-tooltip': true },
        { label: "付款项目", width: "150", prop: "paymentProject", formatter: this.dataFormatter },
        { label: "付款次数", width: "150", prop: "paymentNum", formatter: this.dataFormatter },
        { label: "付款金额（元）", width: "150", prop: "paymentAmount", formatter: this.priceFormatter, 'show-overflow-tooltip': true },
        { label: "付款日期", width: "150", prop: "paymentDate", formatter: this.dataFormatter },
      ]
    },
    // 操作按钮
    operaInfo () {
      return ['preview', { 'edit': '编辑' }, ['delete', row => {
        return row.hisNum <= 1
      }]]
    },
    // 付款项目
    contractTypes () {
      return this.getDict('payment-contract-pay-project')
    },
    // 菜单列表
    menuList () {
      return this.getPermissions('pay_contract_registration_batch_del') ? ['add', 'delete', 'export'] : ['add', 'export']
    },
    // 删除权限判断
    canDelete () {
      return this.getPermissions('pay_contract_registration_del')
    },
  },
  methods: {
    // 数据请求
    queryData (params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      if (requestData.signingDateStart == '') {
        delete requestData.signingDateStart
      }
      if (requestData.signingDateEnd == '') {
        delete requestData.signingDateEnd
      }
      getPaymentList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.tableData = records
        this.params = requestData
        this.pager = { total, current, size }
      }).finally(() => {
        this.loading = false
      })
    },
    // 菜单点击监听
    handleMenuClick (type) {

      switch (type) {
        case 'add':
          this.$refs.dialog.show({ type: 'add' })
          break;
        case 'delete':
          let ids = this.selectDataArr.map((sd) => sd.paymentRegistrationId);
          this.deleteData(ids, 'menu');
          break;
        case 'export':
          this.publicExport('其他付款合同付款登记记录', '/api/payment/contract/registration/export', this.params, 'xls')
          break;
        default:
          this.$message(type)
          break;
      }
    },
    //表格按钮点击事件监听
    handleBtnClick ({ type, row }) {
      switch (type) {
        case 'preview':
        case 'edit':
          this.$refs.dialog.show({ type, data: JSON.parse(JSON.stringify(row)) })
          break;
        case 'delete':
          this.deleteData([row.paymentRegistrationId]);
          break;
        default:
          break;
      }
    },
    // 删除数据
    async deleteData (data, deleteType = 'default') {
      this.$confirm("此操作将永久删除该数据, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await deletePaymentList(data, deleteType);
        if (res.data.code === 0) {
          this.$message.success("删除成功!")
        }
        this.queryData({ current: 1 })
      }).catch(() => {
        //this.$message.info("已取消删除");
      });
    },
    // 格式化
    dataFormatter (row, column, cellValue) {
      switch (column.property) {
        case 'paymentDate': // 付款日期
          return cellValue ? cellValue.split(' ')[0] : '';
        case 'paymentProject': // 付款项目
          let type = this.contractTypes.find(item => item.value == cellValue)
          return type ? type.label : '';
        case 'paymentNum': // 付款次数
          return `第 ${cellValue} 次`
        default:
          break;
      }
    },
  }
}
</script>

